<%@ page contentType="text/html;charset=UTF-8" %>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="stmain"/>
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'home.css')}" type="text/css"/>
    <link rel="stylesheet" href="${resource(dir: 'css/custom-theme', file: 'jquery-ui-1.8.18.custom.css')}" type="text/css"/>
    <g:javascript src="jquery-1.7.1.min.js"/>
    <g:javascript src="jquery-ui-1.8.18.custom.min.js"/>
    <g:javascript src="dialog.js"/>
    <title>SimTester - Home</title>
  </head>
  <body>
  
  <p>
    Welcome, ${session.user}.
    <g:if test="${team == 'unassigned'}">
      You are not currently in a team.
    </g:if>
    <g:else>
      You are part of team <b>${team.capitalize()}</b>
    </g:else>
  </p><br/>

  	<h2>My Recent Tests</h2>
  	<g:if test="${testruns.isEmpty()}">
  	  <p>You have no recent tests</p>
  	</g:if>
  	<g:else>
  	  <table class="sttable">
      <thead>
        <tr>
          <th>Test Name</th>
          <th>Status</th>
          <th>Start Date</th>
          <th>End Date</th>
          <th> </th>
        </tr>
      </thead>
      <tbody>
        <g:each in="${testruns}" var="r">
          <tr title="ID: ${r.id}">
            <td>${r.name}</td>
            <td>${r.status}</td>
            <td><g:formatDate date="${r.dateCreated}" format="MM/dd/yyyy HH:mm:ss"/></td>
            <td><g:formatDate date="${r.endDate}" format="MM/dd/yyyy HH:mm:ss"/></td>
            <td>
              <g:link name="view" controller="testRun" action="results" params="[id: r.id]">View</g:link>
            </td>
          </tr>
        </g:each>
      </tbody>
  	  </table>
  	</g:else>
	<br />
	<br />
	
  	<g:if test="${session.user == 'admin'}" >
 	<!-------------------------------------------------------- 
 		Category Section includes a select list of categories 
 	    The Manage Category button is used to add/remove category via a dialog box
 	    --------------------------------------------------------------------------->
 	    
    <label><h2>Categories</h2></label>
    <div>
    	<select id="home-cat-select-list" name="home-cat-select-list" multiple="multiple" size="7" disabled="disabled">
    	  <g:each in="${catlist}">
    	    <option class="opt" value="${it.capitalize()}">${it.capitalize()}</option>
    	  </g:each>
    	</select>
    </div>
    <br/>
    <div id="mngcatbtn">
      <p><input id="mng-cat" class="green button" type="button" name="mng-cat-btn" value="Manage Categories" /></p>
 	</div>
    
 	<div id="mng-cat-dialog" title="Manage Categories">
    <g:form name="mngcatform" controller="category" action="update">
    <div class="addcat">
 		<br/>
        <label>Enter new category</label><br/>
        <input type="text" id="catnametxt"/>
        <input class="button green" type="button" name="add-cat-btn" value="Add"/>
      </div>
    <br/>
 	<div class="remcat">
  	  <label>Category List:</label>
  	    <br/>
  	    <table>
  	      <tr>
  	        <td>
  	          <g:select id="cat-select-list" name="cat-select-list" multiple="multiple" value="" from="${catlist}"/>
  	        </td>
  	        <td valign="top">
              <input class="button red" type="button" name="rem-cat-btn" value="Remove"/>
            </td>
          </tr>
        </table>
      </div>
	  <input style="display:none;" name="updatedcatlist" value="" />
	  <input type="submit" name="submit-btn" value="Done"/>
    </g:form>
  </div>
  </br> 	
  </br>
    
    <!------------------------------------------------------------- 
 		User & Team Section includes a table of users and assigned team, 
 	    The Add/Remove icon is used to add/remove team list via dialog box
 	    The Assigned Team button is used to add/remove category via a dialog box
 	    ---------------------------------------------------------------------------->
    
    <label><h2>Users</h2></label>
    <g:img id="mng-team-icon" class="toolboximg" title="Add/Remove Team" dir="images" file="team.png"/>
 	<g:form name="teamform" controller="team" action="show">
    <div class="tablepagination">
    <table class="sttable" >
      <thead>
        <tr>
          <th>&nbsp;</th>
		  <th>User</th>
		  <th>Team</th>
		</tr>
      </thead>
      <tbody>
        <g:each in="${userlist}" var="usr" status="i">
          <tr>
            <g:if test="${i == 0}">
              <td><g:radio name="user" value="${usr.id}" checked="true"/></td>
            </g:if>
            <g:else>
              <td><g:radio name="user" value="${usr.id}"/></td>
            </g:else>
            <td>${usr.username}</td>
            <td>${usr.team.name.capitalize()}</td>
          </tr>
        </g:each>
      </tbody>
    </table>
    <div class="pagination">
		<g:paginate prev="&#8592; Previous" next="Next &#8594;" maxsteps="2" max="5" controller="user" action="home" total="${usercount}" />
    </div>
    </div>
    <p><input id="assign-team" class="green button" type="button" name="assign-team-btn" value="Assign Team" /></p>
    </g:form>
    
    <div id="mng-team-dialog" title="Manage Team">
    <g:form name="mngteamform" controller="team" action="update">
      <div class="addteam">
 		<br/>
        <label>Enter new team</label><br/>
        <input type="text" id="teamnametxt"/>
        <input class="button green" type="button" name="add-team-btn" value="Add"/>
      </div>
      <br/>
 	  <div class="remteam">
  	    <label>Team List:</label>
  	    <br/>
  	    <table>
  	      <tr>
  	        <td>
  	          <g:select id="team-select-list" name="team-select-list" multiple="multiple" value="" from="${teamlist}"/>
  	        </td>
  	        <td valign="top">
              <input class="button red" type="button" name="rem-team-btn" value="Remove"/>
            </td>
          </tr>
        </table>
      </div>
	  <input style="display:none;" name="updatedteamlist" value="" />
	  <input type="submit" name="submit-btn" value="Done"/>
    </g:form>
    </div>

	<div id="assign-team-dialog" title="Assign Team">
    <g:form name="assignteamform" controller="user" action="assignteam">
      <div class="assignteam">
 		<br/>
        <input style="display:none;" name="uid" value="" />
        <label>Select a team for </label><label></label>
   	  	<br/><br/>
        <g:select id="assign-team-select-list" name="selectedteam" value="" from="${teamlist}"/>
      </div>
    
	  <!-- <input style="display:none;" name="selectedteam" value="" />-->
	  <input type="submit" name="submit-btn" value="Done"/>
    </g:form>
  	</div>
    <g:javascript>
      var cat_list = [];
      var team_list = [];
	  $(document).ready(function(){
		  $("#mng-cat-dialog input[value=Done]").hide();
		  $("#mng-team-dialog input[value=Done]").hide();
		  $("#assign-team-dialog input[value=Done]").hide();   
		        
	 	  $("#mng-cat").click(function() {
	        $("#mng-cat-dialog").dialog("open");
	        cat_list = [];
			$("#cat-select-list > option").each(function(){
				cat_list.push(this.value);
			});
	      });
	      
	       // Add Category button, trim text input field before adding the list
	      $("#mngcatform input[name=add-cat-btn]").click(function(){
	      	  var new_cat_name = $("#catnametxt").val().trim();
			  if ( new_cat_name ) {
				  cat_list.push(new_cat_name);
		          $('#cat-select-list').append("<option value='"+new_cat_name+"'>"+new_cat_name+"</option>");
				  $("#catnametxt").val('');
			  }
      	  });
	      
	      $("#mngcatform input[name=rem-cat-btn]").click(function(){
            $("#cat-select-list option:selected").each( function() {
			  cat_list.splice($.inArray($(this).val(), cat_list),1);
	          $(this).remove();
            });
          });
	        
	      $("#mng-team-icon").click(function() {
	        $("#mng-team-dialog").dialog("open");
	        team_list = [];
			$("#team-select-list > option").each(function(){
				team_list.push(this.value);
			});
			$("#team-select-list option[value='Unassigned']").hide();
	      });
	      
	      // Add Team button, trim text input field before adding the list
	      $("#mngteamform input[name=add-team-btn]").click(function(){
	      	  var new_team_name = $("#teamnametxt").val().trim();
			  if ( new_team_name ) {
				  team_list.push(new_team_name);
		          $('#team-select-list').append("<option value='"+new_team_name+"'>"+new_team_name+"</option>");
				  $("#teamnametxt").val('');
			  }
      	  });
	        
	      $("#mngteamform input[name=rem-team-btn]").click(function(){
              $("#team-select-list option:selected").each( function() {
			  team_list.splice($.inArray($(this).val(), team_list),1);
	          $(this).remove();
              });
		  });
			
			$("#assign-team").click(function() {
			  if ( $("#assign-team-select-list option").length <= 1 ) {
				  msgbox("You don't have a team to assign to. Please create a new team.", 'warn');
			  } else {
	        	  var id = $("input[name=user]:checked").val();
	        	  $("#assignteamform div label:eq(1)").html($("input[name=user]:checked").parent().next().text());
	        	  $("#assignteamform input[name=uid]").val(id)
				  $("#assign-team-dialog").dialog("open");
     	      }
     	    });	 
     	 
	      // Manage Category dialog
	      $("#mng-cat-dialog").dialog({
	        autoOpen: false,
	        height: 450,
	        width: 330,
	        modal: true,
	        buttons: [
	          {
	            id: "mng-cat-done",
	            text: "Done",
	            class: 'green button',
	            click: function() {
	              $("#mngcatform input[name=updatedcatlist]").val(cat_list);
	              $("#mng-cat-dialog input[value=Done]").click();
	            }
	          }
	        ]
	      });
	      
	      // Manage Team dialog
	      $("#mng-team-dialog").dialog({
	        autoOpen: false,
	        height: 450,
	        width: 330,
	        modal: true,
	        buttons: [
	          {
	            id: "mng-team-done",
	            text: "Done",
	            class: 'green button',
	            click: function() {
	              $("#mngteamform input[name=updatedteamlist]").val(team_list);
	              $("#mng-team-dialog input[value=Done]").click();
	            }
	          }
	        ]
	      });
      
		  // Assign Team dialog
	      $("#assign-team-dialog").dialog({
	        autoOpen: false,
	        height: 330,
	        width: 330,
	        modal: true,
	        buttons: [
	          {
	            id: "assign-team-form-button",
	            text: "Assign",
	            class: 'green button',
	            click: function() {
	               $("#assign-team-dialog input[value=Done]").click();
	            }
	          }
	        ]
	      });
	      
           
       function enableAddButton() {
        $("#mngcatform input[value=Add]")
          .fadeTo(0, 1)
          .attr('disabled', false)
          .removeClass('disabled')
          .unbind('click')
          .click(function(e) {
	          var new_cat_name = $("#catnametxt").val();
			  cat_list.push(new_cat_name);
	          $('#cat-select-list').append("<option value='"+new_cat_name+"'>"+new_cat_name+"</option>");
			  $("#catnametxt").val('');
	      });
       }
       
       function disableAddButton() {
        $("#mngcatform input[value=Add]")
          .fadeTo(0, 0.3)
          .attr('disabled', true)
          .addClass('disabled')
          .unbind('click');
        }
    });  
    </g:javascript>
    </g:if>
  </body>
</html>

